<template>
  <div
    id="custom__tag"
    :style="{
      'border-width': '1px',
      'border-style': 'solid',
      'border-color': borderColor || '#ddd',
      'border-radius': borderRadius ? borderRadius + 'px' : 'none',
      height: commonsStyle(),
    }"
  >
    <div class="tags-wrapper" :style="{ height: commonsStyle() }">
      <span
        @click="deleteTag(index)"
        v-for="(tag, index) in tags"
        :key="index"
        :style="spanStyle()"
      >
        {{ tag }}
        <svg
          t="1649532405972"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4732"
          width="12"
          height="12"
        >
          <path
            d="M176.662 817.173c-8.19 8.471-7.96 21.977 0.51 30.165 8.472 8.19 21.978 7.96 30.166-0.51l618.667-640c8.189-8.472 7.96-21.978-0.511-30.166-8.471-8.19-21.977-7.96-30.166 0.51l-618.666 640z"
            :fill="tagTextColor || 'white'"
            p-id="4733"
          ></path>
          <path
            d="M795.328 846.827c8.19 8.471 21.695 8.7 30.166 0.511 8.471-8.188 8.7-21.694 0.511-30.165l-618.667-640c-8.188-8.471-21.694-8.7-30.165-0.511-8.471 8.188-8.7 21.694-0.511 30.165l618.666 640z"
            :fill="tagTextColor || 'white'"
            p-id="4734"
          ></path>
        </svg>
      </span>
    </div>
    <div class="input">
      <input
        type="text"
        @keydown.enter="addTags"
        :placeholder="
          !tipText
            ? '标签按 Enter 输入 , 最多只能添加 ' +
              (maxTagNumber || 7) +
              ' 个标签,请勿重复'
            : typeof tipText === 'string' ? tipText : tipText(maxTagNumber || 7)
        "
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "CustomTag",
  props:{
     borderColor:String,
     tags:Array,
     maxTagNumber:Number|String,
     addTag:Function,
     deleteTag:Function,
     borderRadius:Number|String,
     tipText:String|Function,
     tagBackgroundColor:String,
     tagTextColor:String,
     noTagRounded:Boolean
  },
  // props: [
  //   "borderColor",
  //   "tags",
  //   "maxTagNumber",
  //   "addTag",
  //   "deleteTag",
  //   "border-radius",
  //   "tipText",
  //   "tipBackgroundColor",
  //   "tipTextColor",
  //   "noTipRounded",
  // ],
  mounted() {
    if (!this.tags)
      throw new Error("You need to pass in an attribute named tags");
    if (!this.addTag)
      throw new Error("You need to pass in an method named addTag");
    if (!this.deleteTag)
      throw new Error("You need to pass in an method named deleteTag");
  },
  methods: {
    commonsStyle() {
      return (this.height || 30) + "px";
    },
    spanStyle() {
      return {
        "background-color": this.tagBackgroundColor || "#08f",
        "color": this.tagTextColor || "white",
        "border-radius": this.noTagRounded ? "0"  : "4px",
      };
    },
    addTags($event) {
      if (
        $event.target.value &&
        this.tags?.length < (this.maxTagNumber ? this.maxTagNumber : 7)
      ) {
        if (this.tags.includes($event.target.value)) {
          this.addTag(false, (callback) => callback());
        } else {
          this.addTag($event.target.value);
          $event.target.value = "";
        }
      }
    },
  },
};
</script>

<style scoped>
#custom__tag {
  width: 100%;
  padding: 5px;
  font-size: 12px;
  display: flex;
}

.tags-wrapper {
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  line-height: 12px !important;
}

.tags-wrapper span {
  margin: 0 5px;
  padding: 5px 7px;
  cursor: pointer;
}

.tags-wrapper span:hover {
  opacity: 0.9;
}

.input {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 5px;
}

.input input {
  border: none;
  height: 100%;
  outline: none;
  font-size: 14px;
  width: 100%;
}
</style>
